<template>
	<view class="storePage">
		<view class="storeListTop">
			<view class="search-content">

				<image class="search-img" src="../../static/会员卡管理端/组合 405.png" mode=""></image>
				<input placeholder="请输入门店名字" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
			</view>
		</view>
		<view style="padding: 10rpx  30rpx">
			<view class="flex-between margin_20rpx_0">
				<view class="flex" @click="addStore()">
					<uni-icons type="plusempty" size="16"></uni-icons>
					<text class="font-size_26rpx">添加门店</text>

				</view>
				<!-- <view class="month">
					<view class="selectTime flex-align-center">

						<view class="tab " v-for="(item, index) in orderStatusArr" :key="index">
							<view :class="[currentIndex == index ? 'active ' : ''] " @click="switchTimeTab(index)">
								{{ item.value }}
							</view>
						</view>
					</view>
				</view> -->
			</view>



		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="padding_20rpx">
					<view class="storeList">
						<view class="flex-between">
							<view class="flex-start-center">
								<image class="avater" :src="item.logo" mode=""></image>
								<view class="margin-left_20rpx font-weight_bold">
									{{item.name}}
								</view>
							</view>
							<view class=""  color="#1890FF" @click="edit(item)">
								编辑
							</view>
						</view>
						<view class="storeDetail  font-overflow">
							<view class="font-overflow padding-bottom_20rpx">
								员工数量：<text style="font-size: 28rpx;">{{item.user_count}}(名)</text>
							</view>
							<view class="font-overflow padding-bottom_20rpx font-overflow">
								门店地址：<text style="font-size: 28rpx;">{{item.province_name}}{{item.county_name}}{{item.address}}</text>
							</view>
							<view class="flex-between font-overflow padding-bottom_20rpx">
								<view class="">
									套餐卡使用次数：<text style="font-size: 28rpx;">{{item.package_use_count}}</text>
								</view>
								<!-- <view class="font-overflow">
									门店联系人电话：<text style="font-size: 28rpx;">{{item.phone}}</text>
								</view> -->
							</view>
						<!-- 	<view class="flex-between padding-bottom_20rpx">
								<view class="">
									商城订单：<text style="font-size: 28rpx;">10号</text>
								</view>
								<view class="font-overflow">
									线下支付数：<text style="font-size: 28rpx;">1000</text>
								</view>
							</view> -->
							<view class="font-overflow padding-bottom_20rpx">
								门店联系人：<text style="font-size: 28rpx;">{{item.real_name}}</text>
							</view>
							<view class="font-overflow">
								门店联系人电话：<text style="font-size: 28rpx;">{{item.phone}}</text>
							</view>
							<!-- <view class="font-overflow">
								线上商城营业额：<text style="font-size: 28rpx;">3632321.00</text>
							</view> -->
						</view>
						<!-- <view class="flex-around margin-top_16rpx">
							<view class="flex-column">
								<view style="color: rgb(255, 0, 0);" class="font-weight_bold">
									￥363231.00
								</view>
								<view style="color: rgb(153, 153, 153);" class="">
									套餐充值金额
								</view>
							</view>
							<view class="line">

							</view>
							<view class="flex-column">
								<view style="color: rgb(255, 0, 0);" class="font-weight_bold">
									￥363231.00
								</view>
								<view style="color: rgb(153, 153, 153);" class="">
									套餐充值金额
								</view>
							</view>
						</view> -->
					</view>
				</view>
			</block>
		</mescroll-body>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				currentIndex: 0,
				searchVal: '',
				orderStatusArr: [{
						value: '今日'
					},
					{
						value: '本月'
					},

					{
						value: '自定义'
					},

				],
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
		},
		onShow() {
			this.mescroll?.resetUpScroll();


		},
		methods: {
			async upCallback(scroll) {

				const result = await this.$http.get({
					url: this.$api.storeList,
					data: {
						page: scroll.num,
						limit: 10,
						name:this.searchVal

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},
			addStore(){
				this.$sun.navGo('/pages/storeList/addStore')
			},
			edit(item){
				this.$sun.navGo('/pages/storeList/addStore',{...item})
			},
			switchTimeTab(index) {
				console.log(index)
				this.currentIndex = index
			},
			changeInput(e){
				this.searchVal=e.detail.value
				this.mescroll?.resetUpScroll();
				
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;
	}

	.storePage {
		.storeListTop {
			background: rgb(255, 255, 255);

			padding: 34rpx;

			.search-content {
				justify-content: center;
				display: flex;
				align-items: center;
				// width: 446rpx;
				height: 88rpx;

				background: rgb(246, 248, 255);
				;
				border-radius: 84rpx;

				.search-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					margin-left: 40rpx;
				}

				.icon_close {
					padding: 0rpx 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}
			}



		}

		.storeList {
			.avater {
				width: 62rpx;
				height: 62rpx;
			}

			border-radius: 20rpx;
			padding: 30rpx;
			background: rgb(255, 255, 255);

			.storeDetail {


				padding: 25rpx 30rpx;
				background: rgb(251, 251, 251);
				margin-top: 26rpx;
			}

			.line {
				width: 0;
				height: 76.26rpx;
				border: 2rpx solid rgb(246, 246, 246);
			}
		}

		.month {
			.selectTime {
				.tab {
					list-style-type: none;
					margin-right: 20rpx;
					display: block;
					width: 106rpx;
					height: 44rpx;
					line-height: 44rpx;

					border: 1px solid rgb(239, 239, 239);
					text-align: center;
					background: rgb(255, 255, 255);
					color: rgb(153, 153, 153);
				}

				.active {
					width: 106rpx;
					height: 44rpx;

					background: rgb(108, 133, 252);
					color: rgb(255, 255, 255);
					;
					text-align: center;
					line-height: 44rpx;
				}






			}
		}
	}
</style>